<template>
  <div>
    <h1>slot</h1>
    <Test1 :todos="todos">
      <!-- 
       <template v-slot="todo">
        <h3>{{todo}}</h3>
       </template>
      -->
      <template v-slot="{$row,$index}">
       <span :style="{color:$row.done?'green':'red'}">{{$row.title}}--{{$index}}</span>
      </template>
    </Test1>
    <Test>
      <div>
        <pre>七胜责之</pre>
      </div>
      <!-- 具名插槽填充a  -->
      <template v-slot:a>
        <div>具名插槽a内容：所办一再</div>
      </template>
      <!-- v-slot:b 可以简化为 #b -->
      <template #b>
        <div>具名插槽a内容：作庙翼翼</div>
      </template>
    </Test>
  </div>
</template>

<script setup lang="ts">
import Test from './Test.vue';
import Test1 from './Test1.vue';
//插槽:默认插槽、具名插槽、作用域插槽
//作用域插槽:就是可以传递数据的插槽,子组件可以讲数据回传给父组件,父组件可以决定这些回传的
//数据是以何种结构或者外观在子组件内部去展示！！！

import { ref } from 'vue';
//todos数据
let todos = ref([
  { id: 1, title: '吃饭', done: true },
  { id: 2, title: '睡觉', done: false },
  { id: 3, title: '打豆豆', done: true },
  { id: 4, title: '打游戏', done: false },
]);
</script>

<style scoped>
</style>